<template>
	<view class="food-item" :class="{'f-order': scene === 'order', 'f-new': scene === 'new'}">
		<view class="b-cover" @click="onJumpDetail('view')">
			<image :src="item.cover_url" mode="aspectFill"></image>
		</view>
		<view class="b-main">
			<text class="b-title too-long">{{item.name}}</text>
			<view class="b-info">
				<view class="s-count">已售 {{item.count_sale}}</view>
				<!-- <view class="s-category" v-if="scene !== 'order'">{{item.category_name}}</view> -->
			</view>
			<view class="b-price">
				<view class="s-payment">
					<view class="s-amount">¥{{item.price}}</view>
					<view class="s-unit" v-if="item.multi_spec">起</view>
				</view>
				<view class="s-action f-choose f-disable" v-if="item.count_left <= 0">
					<view class="s-tit">已售罄</view>
				</view>
				<template v-else>
					<view class="s-action f-choose" @click="onJumpDetail" v-if="item.multi_spec">
						<view class="s-tit">选规格</view>
						<view class="s-num" v-if="totalGoodsCount > 0">{{totalGoodsCount}}</view>
					</view>
					<template v-else>
						<view class="s-action f-counter" v-if="goodsCount > 0">
							<view class="iconfont icon-minus1" @click="onCounter('dec')"></view>
							<view class="s-num">{{goodsCount}}</view>
							<view class="iconfont icon-plus1" @click="onCounter('inc')"></view>
						</view>
						<view class="s-action f-quick" v-else @click="onAddCart">
							<view class="iconfont icon-plus1"></view>
						</view>
					</template>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleCart
	} from '@/service/api/order.js'
	export default {
		name: 'food-item',
		props: {
			item: {
				type: Object,
				default: null
			},
			scene: {
				type: String,
				default: null
			}
		},
		data() {
			return {};
		},
		computed: {
			cartList() {
				return this.$store.getters.cartList || []
			},
			cartIndex() {
				let cartIndex = -1
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].goods_id == this.item.id) {
						cartIndex = i
						break
					}
				}
				return cartIndex
			},
			goodsCount() {
				if (this.cartIndex == -1) {
					return 0
				}
				return this.cartList[this.cartIndex].goods_count
			},
			totalGoodsCount() {
				let totalGoodsCount = 0
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].goods_id == this.item.id) {
						totalGoodsCount += parseInt(this.cartList[i].goods_count)
					}
				}
				return totalGoodsCount
			}
		},
		methods: {
			onJumpDetail(type) {
				console.log('onJumpDetail')
				if (type === 'view' || this.item.count_left > 0) {
					this.$emit('show', this.item)
				}
			},
			onAddCart() {
				this.$emit('addCart', {
					goods_id: this.item.id,
					goods_name: this.item.name,
					goods_price: this.item.price,
					goods_cover: this.item.cover_url,
					goods_data: null,
					goods_count: 1
				})
			},
			onCounter(type) {
				const cartItem = this.cartList[this.cartIndex]
				if (type === 'dec' && cartItem.goods_count <= 0) {
					return
				}
				handleCart(cartItem.id, type === 'inc' ? 'increase' : 'decrease').then(([err, res]) => {
					console.log('handleCart', err, res)
					if (!err) {
						this.$store.commit('cartItemCounter', {
							index: this.cartIndex,
							type
						})
						this.$emit('addCart')
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	.food-item {
		padding: 0 30upx;
		background: #fff;
		display: flex;
		align-items: center;

		&:last-child {
			margin-bottom: 0;
		}

		&.f-new {
			padding: 0;
			flex-direction: column;

			.b-cover {
				width: 220upx;
				height: 220upx;
			}

			.b-main {
				margin-top: 10upx;
				margin-left: 0;
				width: 220upx;

				.b-info {
					display: none;
				}

				.b-price {
					.s-payment {
						.s-amount {
							font-size: 28upx;
						}

						.s-unit {
							display: none;
						}
					}

					.s-action {
						&.f-choose {
							.s-tit {
								padding: 0 14upx;
								height: 42upx;
								line-height: 42upx;
								border-radius: 21upx;
								font-size: 24upx;
							}

							.s-num {
								top: -20upx;
								right: -20upx;
							}
						}

						&.f-quick {
							.iconfont {
								font-size: 36upx;
							}
						}

						&.f-counter {
							.iconfont {
								font-size: 36upx;
							}

							.s-num {
								width: 30upx;
								font-size: 24upx;
							}
						}
					}
				}
			}
		}

		&.f-order {
			.b-cover {
				width: 160upx;
				height: 160upx;
			}

			.b-main {
				margin-left: 20upx;

				.b-title {
					font-size: 28upx;
				}

				.b-info {
					margin-top: 8upx;
				}

				.b-price {
					margin-top: 30upx;

					.s-payment {
						.s-amount {
							font-size: 32upx;
							font-weight: bold;
						}

						.s-unit {
							font-size: 26upx;
						}
					}

					.s-action {
						&.f-choose {
							.s-tit {
								padding: 0 16upx;
								height: 46upx;
								line-height: 46upx;
								border-radius: 23upx;
								font-size: 24upx;
							}

							.s-num {
								top: -20upx;
								right: -20upx;
							}
						}

						&.f-quick {
							.iconfont {
								font-size: 40upx;
							}
						}

						&.f-counter {
							.iconfont {
								font-size: 40upx;
							}

							.s-num {
								width: 40upx;
								font-size: 28upx;
							}
						}
					}
				}
			}
		}

		.b-cover {
			width: 160upx;
			height: 160upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}

		.b-main {
			flex: 1;
			margin-left: 20upx;

			.b-title {
				font-size: 30upx;
				color: #333;
			}

			.b-info {
				margin-top: 10upx;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;

				.s-category {
					margin-top: 10upx;
					display: inline-block;
					color: $pq-minor-color;
					font-size: 24upx;
					// padding: 0 10upx;
					// height: 32upx;
					// border-radius: 16upx;
					// border: 2upx solid #1A1A1A;
				}

				.s-count {
					font-size: 24upx;
					color: #1A1A1A;
				}
			}


			.b-price {
				margin-top: 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s-payment {
					font-size: 28upx;
					color: #FF9523;
					display: flex;
					align-items: center;

					.s-amount {
						font-size: 36upx;
						font-weight: bold;
					}

					.s-unit {
						margin-left: 10upx;
						font-size: 24upx;
						color: #1A1A1A;
					}
				}

				.s-action {

					&.f-choose {
						position: relative;

						.s-tit {
							padding: 0 20upx;
							height: 50upx;
							line-height: 50upx;
							border-radius: 25upx;
							color: #fff;
							font-size: 24upx;
							background: #1A1A1A;
						}

						.s-num {
							position: absolute;
							top: -20upx;
							right: -20upx;
							width: 40upx;
							height: 40upx;
							border-radius: 20upx;
							line-height: 40upx;
							text-align: center;
							color: #fff;
							font-size: 24upx;
							background: #FFC300;
						}
					}

					&.f-disable {
						.s-tit {
							background: #999;
						}
					}

					&.f-quick {
						display: flex;
						align-items: center;
						justify-content: center;

						.iconfont {
							color: #1A1A1A;
							font-size: 50upx;
						}
					}

					&.f-counter {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 50upx;
							color: #1A1A1A;
						}

						.s-num {
							width: 50upx;
							text-align: center;
							font-size: 30upx;
							color: #333;
						}
					}
				}
			}
		}
	}
</style>